<template>
  <!-- 报名详情 -->
  <div class="details-container page-container">
    <el-page-header
      title="返回"
      @back="handleBack"
    >
      <template #content>
        <el-space>
          <h1
            size="large"
            tag="b"
          >查看机构信息</h1>
        </el-space>
      </template>
    </el-page-header>
    <el-divider></el-divider>
    <div class="descriptions-container">
      <el-descriptions
        :column="2"
        border
      >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <user />
              </el-icon>
              机构名称
            </div>
          </template>
          {{details_data.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <user />
              </el-icon>
              机构 ID
            </div>
          </template>
          {{details_data.userId}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <user />
              </el-icon>
              机构类型
            </div>
          </template>

          <el-tag
            class="table_btn_success"
            size="small"
            type="warning"
            plain
            v-if="details_data.institutionType=='school'"
          >学校</el-tag>
          <el-tag
            class="table_btn_success"
            size="small"
            type="warning"
            plain
            v-else-if="details_data.institutionType=='institution'"
          >机构</el-tag>
          <el-tag
            class="table_btn_success"
            size="small"
            type="warning"
            plain
            v-else-if="details_data.institutionType=='team'"
          >团队</el-tag>
          <el-tag
            class="table_btn_success"
            size="small"
            type="warning"
            plain
            v-else
          >其他</el-tag>

        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <user />
              </el-icon>
              机构所在地
            </div>
          </template>
          {{details_data.economizeName}} {{details_data.marketName}} {{details_data.countyName}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <user />
              </el-icon>
              联系地址
            </div>
          </template>
          {{details_data.address}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <user />
              </el-icon>
              联系人
            </div>
          </template>
          {{details_data.headName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <user />
              </el-icon>
              是否审核通过
            </div>
          </template>
          <el-tag
            type="warning"
            v-if="details_data.auditStatus === 0"
          >等待审核</el-tag>
          <el-tag
            type="success"
            v-else-if="details_data.auditStatus === 1"
          >审核通过
          </el-tag>
          <el-tag
            type="danger"
            v-else-if="details_data.auditStatus === 2"
          >审核未通过
          </el-tag>
        </el-descriptions-item>

      </el-descriptions>
    </div>
    <div class="content-container">
      <div class="content-heder-container">
        <h1
          size="large"
          tag="b"
        >查看机构信息</h1>
      </div>
      <el-table
        :data="data"
        border
        style="width: 100%"
        :loading="loading"
      >
        <el-table-column
          label="学生ID"
          prop="id"
          width="80"
        />
        <el-table-column
          label="姓名"
          prop="name"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="身份类型"
          prop="documentType"
          width="130"
        >
          <template v-slot="{row}">
            <el-tag
              class="table_btn_success"
              size="small"
              type="warning"
              plain
              v-if="row.identityType=='参赛选手'"
            >参赛选手</el-tag>
            <el-tag
              class="table_btn_success"
              size="small"
              type="pramry"
              plain
              v-else-if="row.identityType=='指导老师'"
            >指导老师</el-tag>
            <el-tag
              class="table_btn_success"
              size="small"
              type="success"
              plain
              v-if="row.identityType=='机构负责人'"
            >机构负责人</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="奖项"
          prop="awards"
          width="100"
        />
        <el-table-column
          label="手机号码"
          prop="phone"
          width="120"
        >
          <template v-slot="{row}">
            <!-- {{ row.phone.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2") }} -->
            {{row.phone}}
          </template>
        </el-table-column>
        <el-table-column
          label="身份证号"
          prop="documentNumber"
        >
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="createTime"
          width="180"
        >
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          layout="prev, pager, next, total"
          :total="total"
          @current-change="handlePage"
        />
      </div>
      <NoJoinStudentsModal
        ref="NoJoinStudentsModalRef"
        :eventId="route.params.eventId"
      />
    </div>
    <el-dialog
      title="激活"
      width="640px"
      v-model="edit_id_modal.show"
    >
      <el-form label-width="96px">
        <el-form-item label="激活码">
          <el-input
            v-model="edit_id_modal.id"
            size="large"
            placeholder="请填写激活码"
          />
          <el-text>请输入激活码，激活码请向赛事组委会申请获得</el-text>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="large"
          >确认激活码</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

</template>

<script  setup>
// 通过userId 获取机构信息
import { getInformationByUserId, getAllPersonnel } from '@/api/manage/agentmenu/index'
import { usePage } from "@/hooks/usePage"
import { GetRegisteredStudentsApi, DeleteTeacherApi, GetEventInfoByEventIdApi } from "@/api/manage/institution"
import { ref, onMounted } from "vue"
import { Search, Delete } from "@element-plus/icons-vue"
import NoJoinStudentsModal from "./modal/no-join-students.vue"
import { useRoute, useRouter } from "vue-router"
const route = useRoute();
const router = useRouter();
const NoJoinStudentsModalRef = ref();
const {
  total,
  data,
  loading,
  query_data,
  handleLoad,
  handlePage
} = usePage({
  api_fn: getAllPersonnel,
  q_data: {
    studentName: '',
    phone: '',
    userId: route.params.eventId
  }
})
const no_join_modal_show = ref(false)
const handleOpenModal = () => {
  NoJoinStudentsModalRef.value.handleOpenModal();
}
const handleOperate = (command, row) => {
  if (command == 'edit-id') {
    edit_id_modal.value.id = "";
    edit_id_modal.value.studentId = row.studentId;
    edit_id_modal.value.show = true;
  } else if (command == 'remove-join') {
    // 撤销报名
  }
}
const handleRest = () => {
  query_data.value.teacherName = "";
  query_data.value.phone = "";
  handleLoad(true);
}
const eventList = ref({
  userId: route.params.eventId
})
// const from = ref([])
// const handlegetAllPersonnel = async () => {
//   let res = await getAllPersonnel(eventList.value)
//   from.value = res.pageInfo.list
//   from.total = res.pageInfo.total

// }


/**
 * 返回上一步
 */
const handleBack = () => {
  router.back();
}
// 获取人员管理

// ------------------------- 获取详情
const details_data = ref({
})
const handleGetDetails = async () => {
  let res = await getInformationByUserId(
    route.params.eventId
  )

  if (res.success) {
    details_data.value = res.entity;

  }
}
// -------------------------id码
const edit_id_modal = ref({
  show: false,
  studentId: '',
  id: '',

})
onMounted(() => {
  handleLoad(true);
  handleGetDetails()
  // handlegetAllPersonnel()

})
</script>

<style lang="scss" scoped>
.details-container {
  padding: 20px;
  box-sizing: border-box;
  .descriptions-container {
  }
  .content-container {
    .content-heder-container {
      padding: 16px 0;
      display: flex;
      align-content: center;
      justify-content: space-between;
      .people_text {
        font-size: 15px;
        font-weight: bold;
        color: #606266;
      }
    }
    .pagination-container {
      display: flex;
      justify-content: center;
      padding: 32px 0;
    }
  }
}
</style>